<template>
  <div className="mass-distribution-check-info-content">
    <div :class="[{'tw-pointer-events-none':false}]">
      <div>
        <el-table
                ref="table"
                height="tableHeight + 'px'"
                :data="assemblyTreeMaterialAttributeInfoList" highlight-current-row
                :row-style="{height: '0'}"
                :cell-style="{padding: '1px'}" border style="width: 100%;font-size: 13px;"
                v-bind:style="{height: tableHeight + 'px' }"
                :span-method="arraySpanMethod">
          <el-table-column
                  prop="partNumber"
                  :label="$t('message.SoundInsulationMaterialTool.partNumber')"
                  headerAlign="center"
                  align="left"
                  width="150"
          >
          </el-table-column>
          <el-table-column
                  prop="materialNumber"
                  :label="$t('message.SoundInsulationMaterialTool.materialNumber')"
                  headerAlign="center"
                  align="left"
                  width="150"
          >
          </el-table-column>
          <el-table-column
                  prop="class"
                  :label="$t('message.SoundInsulationMaterialTool.class')"
                  headerAlign="center"
                  align="left"
                  width="120"
          >
          </el-table-column>
          <el-table-column
                  prop="materialSpecification"
                  :label="$t('message.SoundInsulationMaterialTool.materialSpecification')"
                  headerAlign="center"
                  align="left"
                  width="120"
          >
          </el-table-column>
          <el-table-column
                  prop="materialSize"
                  :label="$t('message.SoundInsulationMaterialTool.materialSize')"
                  headerAlign="center"
                  align="left"
                  width="200"
          >
          </el-table-column>
          <el-table-column
                  prop="area"
                  :label="$t('message.SoundInsulationMaterialTool.area') + '(mm²)'"
                  headerAlign="center"
                  align="left"
                  width="120"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>

<script>
import * as XLSX from "xlsx"
import saveAs from 'file-saver';

export default {
  name: "SoundInsulationMaterialInfoContent",
  props: {
    assemblyTreeMaterialAttributeInfoList: [],
    isMassComputed: true,
    isExportData: true,
    isMassReComputed: false,
  },
  data() {
    return {
      histogram: null,
      isSortName: true,
      prop: '',
      order: null,
      tableHeight: 200,
      computeCount: 0,
	    partNumberList: [],
    }
  },
	mounted(){
    this.initTableHeight();
    this.getPartCount();
	},
  methods: {
    initTableHeight() {
      let tableLength = this.assemblyTreeMaterialAttributeInfoList.length;
      if(tableLength === 0) {
        this.tableHeight = 170;
      } else if(tableLength <= 8) {
        this.tableHeight = tableLength * 32 + 55;
      } else if(tableLength > 8) {
        this.tableHeight = 9 * 32 + 55;
      }
    },
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if(columnIndex === 0) {
        let index = this.partNumberList.findIndex(item => item.partNumber === row.partNumber);
        let diff = 0;
        if(index > 0) {
          for(let i = 0; i < index; i++) {
            diff += this.partNumberList[i].count;
          }
        }
        if(index !== -1) {
          let count = this.partNumberList[index].count;
          if((rowIndex - diff) % count === 0) {
            return [count, 1]; //[rowspan, columnspan ]
          } else {
            return [0, 0];
          }
        }
      }
    },
	  getPartCount() {
      if(!this.assemblyTreeMaterialAttributeInfoList || this.assemblyTreeMaterialAttributeInfoList.length < 1) {
        return;
      }
      this.assemblyTreeMaterialAttributeInfoList.forEach(item => {
        let partNumber = item.partNumber;
        let index = this.partNumberList.findIndex(part => part.partNumber === partNumber);
        if(this.partNumberList.length < 0 || index === -1) {
          let info = {
            partNumber: partNumber,
	          count: 1
          }
          this.partNumberList.push(info);
        } else if(!(index === -1)) {
          this.partNumberList[index].count++;
        }
      });
      this.partNumberList
	  },
    exportData() {
      //导出excel
      this.generateExcel();
    },
    //导出excel
    generateExcel() {
      let data = [];
      const strTitleLine = [
        this.$t('message.SoundInsulationMaterialTool.partNumber'),
        this.$t('message.SoundInsulationMaterialTool.materialNumber'),
        this.$t('message.SoundInsulationMaterialTool.class'),
        this.$t('message.SoundInsulationMaterialTool.materialSpecification'),
        this.$t('message.SoundInsulationMaterialTool.materialSize'),
        this.$t('message.SoundInsulationMaterialTool.area') + '(mm²)',
      ];
      data.push(strTitleLine);
      this.assemblyTreeMaterialAttributeInfoList.forEach(item => {
        let strLine = [];
        strLine.push(item.partNumber);
        strLine.push(item.materialNumber);
        strLine.push(item.class);
        strLine.push(item.materialSpecification);
        strLine.push(item.materialSize);
        strLine.push(item.area);
        data.push(strLine);
      });

      if (data?.length > 0) {
        let workBook = XLSX.utils.book_new();
        let workSheet = XLSX.utils.aoa_to_sheet(data);
        // 设置合并单元格
	      let elementCount = 0;
        let workSheetMergesList = [];
	      this.partNumberList.forEach(item => {
          let count = item.count;
          let merge = {
            s: { r: elementCount + 1, c: 0 }, e: { r: elementCount + count, c: 0 }
          };
          workSheetMergesList.push(merge);
          elementCount += count;
	      });
        workSheet['!merges'] = workSheetMergesList;

        XLSX.utils.book_append_sheet(workBook, workSheet, "隔热隔声材料统计");
        let excelBuffer = XLSX.write(workBook, {bookType: 'xlsx', type: 'array'});
        let dataBlob = new Blob([excelBuffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'});
        saveAs(dataBlob, '隔热隔声材料用量统计表.xlsx');
      } else {
        soundInsulationMaterialCommand.eventBusAlertMsg("无隔热隔声材料用量统计数据，无法导出数据文件", "waring");
      }
    },
  },
  watch: {
    'isExportData': {
      handler(newVal, oldVal) {
        this.exportData();
      },
    },
    'assemblyTreeMaterialAttributeInfoList': {
      handler(newVal, oldVal) {
        this.getPartCount();
      },
    },
  }
}
</script>

<style>
.editor-input {
    width: 100%;
}

.settingsMenu .el-popover {
    background: var(--bg-color28);
}
</style>

<style scoped>
.mass-distribution-check-info-content div {
    white-space: nowrap;
}

.mass-distribution-check-histogram {
    overflow: auto;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.mass-distribution-check-wrapper {
    overflow-y: auto;
    height: 500px;
}

>>> ::-webkit-scrollbar {
    height: 5px;
}

>>> ::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

>>> .el-table .el-table__header .cell {
    font-size: 13px;
}

>>> .el-table__body-wrapper::-webkit-scrollbar {
    scrollbar-bottom: 50px;
    height: 8px;
}

>>> .el-table .el-table__fixed {
    height: auto !important;
    bottom: 6px !important;
}

>>> .el-table td, >>> .el-table th {
    padding: 0;
}

>>> .el-table .cell, >>> .el-table--border td:first-child .cell, >>> .el-table--border th:first-child .cell {
    padding: 3px 6px;
}

>>> .el-table th {
    background-color: var(--bg-color8) !important;
    color: var(--text-color1)
}

>>> .el-table__empty-text {
    line-height: 30px;
}

>>> .el-table__empty-block {
    min-height: 30px;
}

>>> .el-divider {
    margin: 15px 0;
}

.settingsMenu .el-form-item {
    margin-bottom: 10px;
}

>>> .el-form-item__label {
    line-height: 25px;
}

>>> .el-radio {
    padding: 10px 0;
}

>>> .el-table {
    color: var(--text-color1);
}

>>> .el-table tr {
    background-color: var(--bg-color1) !important;
}

>>> .el-table__fixed-right::before, >>> .el-table__fixed::before {
    background-color: transparent;
}

>>> .el-table__body tr.current-row > td {
    background-color: transparent
}

>>> .el-table__body tr.current-row {
    box-shadow: 0 0 6px var(--bg-color5) inset;
    background-color: var(--bg-color7) !important;
    border-radius: 4px;
}

>>> .el-table__body tr:hover > td, >>> .hover-row > td {
    background-color: var(--bg-color7) !important;
}

>>> .el-table--border td, >>> .el-table--border th, >>> .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right: 1px solid var(--border-color3)
}

>>> .el-table--border th.gutter:last-of-type {
    border-bottom: 1px solid var(--border-color3);
}

>>> .el-table--border th, >>> .el-table__fixed-right-patch {
    border-bottom: 1px solid var(--border-color3)
}

>>> .el-table__fixed-footer-wrapper tbody td {
    border-top: 1px solid var(--border-color3);
    background-color: var(--bg-color1);
    color: #606266
}

>>> .el-table__footer-wrapper td {
    border-top: 1px solid var(--border-color3);
}

>>> .el-table__body-wrapper .el-table--border.is-scrolling-right ~ .el-table__fixed-right {
    border-left: 1px solid var(--border-color3);
}

>>> .el-table, >>> .el-table__expanded-cell {
    background-color: var(--bg-color1);
}

>>> .el-table__fixed-right-patch {
    background-color: var(--bg-color1);
}

>>> .el-table__footer-wrapper tbody td, >>> .el-table__header-wrapper tbody td {
    background-color: var(--bg-color1);
}

>>> .el-table-filter {
    border: 1px solid var(--border-color3);
    background-color: var(--bg-color1);
}

>>> .el-table th {
    color: var(--text-color1);
}

>>> .el-table--border::after, >>> .el-table--group::after, >>> .el-table::before {
    background-color: transparent
}

>>> .el-table td, >>> .el-table th.is-leaf {
    border-bottom: 1px solid var(--border-color3);
}

>>> .el-table--border, >>> .el-table--group {
    border: 1px solid var(--border-color3);
}

>>> .el-pagination__total, >>> .el-pagination__jump {
    color: var(--text-color1);
}

>>> .el-tag.el-tag--info {
    border: 1px solid var(--border-color3);
    background-color: var(--bg-color1);
    color: var(--text-color1);
}

>>> .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: var(--bg-color3);
    color: var(--text-color1);
}

>>> .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409EFF;
    color: #FFF;
}

>>> .el-pagination button {
    background-color: var(--bg-color3) !important;
    color: #C0C4CC !important;
}

>>> .el-pagination button:disabled {
    color: #606266 !important;
}

>>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    border-bottom: 1px solid #409EFF !important;
    background-color: var(--bg-color3);
    color: #409EFF;
}

>>> .el-radio-button__inner {
    border-radius: 0px !important;
    border: 0px !important;
    background-color: var(--bg-color1);
    color: var(--text-color1);
}
.attributeSelect >>> .el-select__tags, .typeAccording2 >>> .el-select__tags {
    display: none;
}

>>> .el-table .cell.el-tooltip {
    min-width: 1px !important;
}

>>> .el-table__row .cell .attr-content {
    display: flex;
    justify-content: center;
    min-height: 29px;
}

>>> .el-table__row .cell .attr-content span {
    align-self: center;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
